import { defineComponent, ref, unref, computed } from 'vue';
import './DeckSelectCardList.less';
import type { DeckDetail } from '/@/api/verse/model/deckModel';
import DeckCardDetail from '/@/views/verse/components/DeckCardDetail/DeckCardDetail';

export default defineComponent({
  name: 'DeckSelectCardList',
  props: {
    mainCards: {
      type: Object as PropType<DeckDetail['main_cards']>,
      required: true,
    },
    otherCards: {
      type: Object as PropType<DeckDetail['other_cards']>,
      required: true,
    },
  },
  setup(props) {
    const detailState = ref(false);
    const detailCardIdState = ref(0);

    const activeTabState = ref(0);
    const activeTabClick = (val: number) => {
      if (val === unref(activeTabState)) {
        return false;
      }
      activeTabState.value = val;
    };

    const CardListState = computed(() => {
      if (!unref(activeTabState)) {
        return props.mainCards || [];
      }
      return props.otherCards || [];
    });

    const minCardsNumber = computed(() => {
      const { mainCards } = props;
      let num = 0;
      mainCards.map((item) => {
        num += item.number!;
      });
      return num;
    });
    const otherCardsNumber = computed(() => {
      const { otherCards } = props;
      let num = 0;
      otherCards.map((item) => {
        num += item.number!;
      });
      return num;
    });

    return () => (
      <div class={'deck-select-card-list-container'}>
        <ul class={'tabs-area flex'}>
          <li
            class={unref(activeTabState) ? 'tabs-item' : 'tabs-item active'}
            onClick={() => {
              activeTabClick(0);
            }}
          >
            <span>主要牌组：</span>
            <span class={unref(minCardsNumber) > 50 || unref(minCardsNumber) < 40 ? 'text-red-500' : ''}>
              {unref(minCardsNumber)}
            </span>
          </li>
          <li
            class={unref(activeTabState) ? 'tabs-item active' : 'tabs-item'}
            onClick={() => {
              activeTabClick(1);
            }}
          >
            <span>额外牌组：</span>
            <span class={unref(otherCardsNumber) > 10 ? 'text-red-500' : ''}>{unref(otherCardsNumber)}</span>
          </li>
        </ul>
        <ul class={'sel-card-area flex flex-wrap'}>
          {unref(CardListState).map((item) => {
            return (
              <li
                class={'sel-card-item'}
                onClick={() => {
                  detailState.value = true;
                  detailCardIdState.value = item.card_id!;
                }}
              >
                <div class={'image'}>
                  <img src={item.img} alt='' />
                </div>
                {item.number! > 1 ? (
                  <div class={'nums'}>
                    <span>X{item.number}</span>
                  </div>
                ) : null}
              </li>
            );
          })}
        </ul>
        <DeckCardDetail v-model={[detailState.value, 'show']} cardId={detailCardIdState.value} />
      </div>
    );
  },
});
